$("header").load("http://localhost:3000/publicPage.html #headerTop",function(){
            $("#login").click(function(){
                $(".loginPage").css({display:"block"})  
            })
        
            $(".loginPage").click(function(){
                $(".loginPage").css("display","none")  
            })
                
            $(".newlogin").click(function(){
                event.stopPropagation()
            });    
});
$(".headTOP").load("http://localhost:3000/publicPage.html #header-newyear")

$("footer").load("http://localhost:3000/publicPage.html .footer-main")


const id = location.search.split("=")[1];

$.ajax({
    url:"http://localhost:3000/api",
    data:{
        type:"getDetail",
        id:id
    },
    success:res=>{
        res=JSON.parse(res);
        if(res.code===1){
            randenDetail(res.data);
        }
    }
})


function randenDetail(data){
    // console.log(data)
    let str="";
    let sImg="";
    let bImg="";
    // console.log(data.sImgs)
        for(let i=0;i<data.sImgs.length;i++){
            sImg+=`<li index=${i}><img src="${data.sImgs[i]}" alt=""></li>`;
        }
        for(let i=0;i<data.bImge.length;i++){
            bImg+=`<img index=${i} src="${data.bImge[i]}" alt="">`;
        } 
        str=`<h1>${data.proName}</h1>
        <div class="price">
            <span>活动价 :</span>
            <b>￥</b>
            <i id="seles">${data.seles}</i>
            <del>${data.price}</del>
        </div>`
    $(".goodslogo").html(`${bImg}<div class="fd"></div>`);
    $(".biglogo").html(bImg);
    $(".sImgs").html(sImg);
    $(".goodstitle").html(str);
    $("goodscart").index=data.id;
}
//选项卡切换
$(".sImgs").on("mouseover","li",function(){
    $(".sImgs").children("li").css({borderColor:"#ddd"});
    $(this).css({borderColor:"#e3393c"});

    $(".goodslogo").children("img").css({left:"100%"});
    $(".goodslogo").children("img").eq($(this).attr("index")).css({left:"75px"})
})

$(".goodslogo").on("mouseover","img",function(){
    $(".biglogo").css({display:"block"});
    $(".biglogo").children("img").css({left:"100%"});
    $(".biglogo").children("img").eq($(this).attr("index")).css({left:0});
    $(".fd").css({display:"block"});


    $(".goodslogo").on("mousemove",function(){

        // console.log($(this).target())
        // $(this).css({left:$(this).offset().left,top:$(this).offset().top})


        // console.log($(this).offset())
    })
    


})


$(".goodslogo").on("mouseout","img",function(){

    $(".biglogo").css({display:"none"});
    $(".fd").css({display:"none"})
})




//加入购物车事件
$(".goodscart").click(function(){
    let seles=$("#seles").html()
    let num = $(".reduce").next().html();
    //将对应id，价格，数量写入本地存储
    setLocal(id,seles,num);
})

function setLocal(id,seles,num){
    const goods = localStorage.getItem("goods")?JSON.parse(localStorage.getItem("goods")):[];
    if(goods.length<1){
        goods.push({
            id:id,
            num:num,
            flag:0,
            seles
        })
    }else{
        let i = 0;
        const flag = goods.some((val,idx)=>{
            i=idx;
            return val.id ===id;
        })
        if(flag){
            goods[i].num++;
        }else{
            goods.push({
                id:id,
                num:num,
                flag:0,
                seles
            })
        }
    }
    localStorage.setItem("goods",JSON.stringify(goods));
    $("#goodsNum").html(goods.length);
}




// 3-2.修改数量 -减
$(".buy").on("click",".reduce",function(){ 
    const num = Number($(this).next().html())-1;
    if(num){
        $(this).next().html(num);
    }else{
        $(this).next().html(0);
    }   
    return false;
})
// ---加
$(".buy").on("click",".plus",function(){
    const num = Number($(this).prev().html())+1;
    $(this).prev().html(num);
    return false;
})